<template>
    <div class="home">
      <header>
        <h1>奇菊网盘</h1>
        <nav>
          <ul>
            <li><a href="#/about">关于我们</a></li>
            <li><a href="#/help">帮助中心</a></li>
            <li><a href="#/login">登录</a></li>
            <li><a href="#/signup">注册</a></li>
          </ul>
        </nav>
      </header>
      <main>
        <section class="hero">
          <h2>安全、便捷的文件存储服务</h2>
          <p>奇菊网盘为您提供高效、安全的文件存储解决方案。</p>
        </section>
      </main>
      <footer>
        <p>&copy; 2024 奇菊网盘. All rights reserved.</p>
      </footer>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Home',
    methods: {
      goToLogin() {
        this.$router.push('/login');
      }
    }
  }
  </script>
  
  <style scoped>
  .home {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 20px;
    height: 95vh;
  }
  
  header {
    background-color: #4CAF50;
    color: white;
    padding: 10px 0;
  }
  
  header h1 {
    margin: 0;
    font-size: 2em;
  }
  
  nav ul {
    list-style-type: none;
    padding: 0;
  }
  
  nav ul li {
    display: inline;
    margin-right: 10px;
  }
  
  nav ul li a {
    color: white;
    text-decoration: none;
  }
  
  .hero {
    margin-top: 20px;
  }
  
  .hero h2 {
    font-size: 2em;
    margin-bottom: 10px;
  }
  
  .hero p {
    font-size: 1.2em;
    margin-bottom: 20px;
  }
  
  .hero button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
  }
  
  .hero button:hover {
    background-color: #45a049;
  }
  
  footer {
    background-color: #f1f1f1;
    padding: 10px 0;
    margin-top: 20px;
  }
  </style>